<!--
 * @Author: YiY
 * @Date: 2024-01-04 17:39:28
 * @LastEditTime: 2024-12-12 09:00:14
-->
<template>
  <div class="content">
    <div class="elDiv">{{ counter.count }}</div>

    <input type="text" class="elInput" v-model="counter.count" />
    <button @click="counter.increment">+1</button>
    <div class="elDiv">{{ counter.doubleCount }}</div>
    <button @click="counter.incrementPersonAge">Age+1</button>
    <div class="elDiv">{{ counter.person.name }}</div>
    <div class="elDiv">{{ counter.person.age }}</div>

  </div>
</template>

<script lang="ts" setup>
import { useCounterStore } from '@/stores';
// import { ref } from 'vue'


const counter = useCounterStore()
// counter.$patch({ count: 100 })


</script>

<style scoped lang="scss">
.content {
  height: 600px;

  background-color: lightgray;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;

  .elDiv {
    border-radius: 5px;
    border-color: yellow;
  }

  .elInput {}
}
</style>
